<!DOCTYPE html>
<html lang="en">
  <head>
    <title>管理后台</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/lib/element-ui@2.4.11/index.css">
    <style>
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
      }
      .el-input {width:180px;}
    </style>
  </head>
  <body>
      <div id="app">
        <el-container>
          <el-header>
            <el-radio-group v-model="isCollapse">
              <el-radio-button :label="false">展开</el-radio-button>
              <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group> 
            <el-button type="primary" style="float:right" @click="loginout">退出</el-button>        
          </el-header>
          <el-container>
          <el-aside width="">
              <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                <el-submenu v-for="(m,pindex) of menulist" :index="m.index" :key="m.index">
                  <template slot="title">
                    <i :class="m.icon"></i>
                    <span slot="title">{{ m.title }}</span>
                  </template>
                  <el-menu-item v-for="(s,index) in m.list" :index="s.path" :key="s.path" @click="menuclick(pindex,index)">{{ s.name }}</el-menu-item>
                </el-submenu>
              </el-menu>
          </el-aside>
          <el-main>
            <el-tabs v-model="ctab" type="border-card" closable @tab-remove="removeTab">
                <el-tab-pane
                  v-for="(item, index) in tabs"
                  :key="item.name"
                  :label="item.title"
                  :name="item.name"
                >
                  <keep-alive>
                    <component v-bind:is="item.comp" v-bind:path="item.path" v-bind:col="item.col" v-bind:pval="item.sval" @showmenu="menuclick"></component>
                  </keep-alive>
                </el-tab-pane>
              </el-tabs>           
          </el-main>
          </el-container>
        </el-container>

          <div v-if="cvshow">
            <component v-bind:is="cview" v-bind:showdv="cvshow" @loadmenu="loadMenu"></component>
          </div>
      </div>
      <script type="text/javascript" src="/lib/vue@2.5.20/vue.min.js"></script>
      <script type="text/javascript" src="/lib/axios@0.18.0/axios.min.js"></script>
      <script type="text/javascript" src="/lib/element-ui@2.4.11/index.js"></script>
      <script type="text/javascript">
        function loadComp(componentName) {
            return new Promise(function (resolve, reject){
                var component = Vue.component(componentName);
                if(component){
                  resolve(component);
                  return;
                } 
                var script = document.createElement('script');
                script.src = "/pages/" + componentName + ".js";
                script.async = true;
                script.onload = function () {
                    var component = Vue.component(componentName);
                    if (component) {
                        resolve(component);
                    } else {
                        reject();
                    }
                }
                document.body.appendChild(script);
            });
        }
        window.http = axios.create({transformResponse:[function(dt){
          let jn = JSON.parse(dt);
          if(jn.location){
            mVue.cvshow = false;
            loadComp("login").then(function(comp){
              mVue.cview = "login";
              mVue.cvshow = true;
            });
            return [];
          }else return jn;
        }]})
        window.mVue = new Vue({
          el: '#app',
          data() {
            return {
              isCollapse: true,
              menulist:[],
              tabs:[],
              ctab:"0",
              tabIndex:0,
              cview:"",
              cvshow:false
            };
          },
          methods: {
            handleOpen(key, keyPath) {
              console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
              console.log(key, keyPath);
            },
            menuselect(key, keyPath){
              console.log("menuselect", key, keyPath);
            },
            menuclick(gind, ind, sval){ //点击菜单
              console.log("menuclick", gind, ind, sval);
              let newTabName = ++this.tabIndex + '';
              let tt = this.menulist[gind].list[ind].name;
              if(sval) tt += "(" + sval + ")"
              let ftb = this.tabs.filter(tab => tab.title == tt);
              if(ftb.length > 0){
                return this.ctab = ftb[0].name;
              }
              //console.log("menuclick", this.menulist[gind].list[ind].col);
              var comp = this.menulist[gind].list[ind].comp || "searchcom";
              var $this = this;
              loadComp(comp).then(function(){
                $this.tabs.push({
                  title: tt,
                  name: newTabName,
                  path: $this.menulist[gind].list[ind].path,
                  col: $this.menulist[gind].list[ind].col,
                  sval: sval || "",
                  comp: comp
                });
                $this.ctab = newTabName;
              })
            },
            removeTab(targetName){ //删除标签
              let tabs = this.tabs;
              let activeName = this.ctab;
              if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                  if (tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                      activeName = nextTab.name;
                    }
                  }
                });
              }
              this.ctab = activeName;
              this.tabs = tabs.filter(tab => tab.name !== targetName);
            },
            loadMenu(){
              let $this = this;
              http.get("/s/menu").then(function(res){
                if(!res.data[res.data.length-1].title) res.data.length = res.data.length - 1;
                $this.menulist = res.data;
              });
            },
            loginout(){
              axios.get("/s/loginout");
            }
          },
          created:function(){ //页面加载完成后
            this.loadMenu();
          }
        })
      </script>
  </body>
</html>